<template>
	<view >
		<view class="item flex-row-space-between" v-for="(item,index) in collectionList" :key="index">
			
				<image class="image" :src="item.image" mode="aspectFill"></image>
				<view class="flex1">
					<view class="flex-row-space-between">
						<view class="name">
							{{item.name}}
						</view>
						<image
						  :data-id="item.id" 
						  style="height: 56rpx;width: 56rpx;flex: none;margin-left: 14rpx"
						  src="/static/images/icon_del.png" 
						  @tap.stop="deleteConfirm" 
						/>
					</view>
					<view class="price" >
						¥{{item.price}}
					</view>
				</view>
			<view>
				
				<u-modal v-model="deleteSure" confirm-text="狠心删除" confirm-color="#FF4D40" :showCancelButton="true"
					:show-title="false" @confirm="cancelCollect" @cancel="deleteSure = false">
					<view class="column-center tips-dialog" style="padding: 20rpx 0;">
						<image class="icon-lg" src="/static/images/icon_warning.png"></image>
						<view style="margin-top:30rpx">确认删除该收藏吗？</view>
					</view>
				</u-modal>
			</view>
		</view>
		<loading-footer :status="status" slotEmpty>
			<view class="data-null column-center" slot="empty">
				<image src="/static/images/profit_null.png" class="img-null" />
				<text class="sm muted">暂无收藏～</text>
			</view>
		</loading-footer>
	</view>
</template>

<script>
	
	import {
		getCollectGoods,
		collectGoods
	} from "@/api/user";
	import { 
		getLeaseCollectGoods,
		leaseCollectGoods
	} from '@/api/lease';
	import {
		CollectType,
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"

	export default {
		data() {
			return {
				tabCurrent: 1,
				// Tabs列表
				tabs: [{
					key: 'shop',
					name: '商城商品'
				}, {
					key: 'lease',
					name: '租赁商品'
				}],
				page: 1,
				status: loadingType.LOADING,
				collectionList: [],
				collectionGoods: CollectType.COLLECTION,
				deleteSure: false,
			};
		},

		methods: {
			// 切换Tabs
			changeTab(index) {
				this.tabCurrent = index;
			},
			
			// 获取当前Tab索引
			getTabIndex() {
				const index = this.tabCurrent;
				return this.tabs[index].key;
			},
			
			// shop || lease 处理方法
			handleType({shop, lease}) {
				const type = this.getTabIndex();
				
				switch(type) {
					case 'shop': return shop();
					case 'lease': return lease();
				}
			},

			// 确认删除
			deleteConfirm(e) {
				this.id = e.currentTarget.dataset.id;
				this.deleteSure = true;
			},

			// 获取收藏列表
			getCollectGoodsFun() {
				const page = this.page;
				const collectionList = this.collectionList;
				const status = this.status;
				
				const reqMethod = (() => {
					const type = this.getTabIndex();
					switch(type) {
						case 'shop': return getCollectGoods;
						case 'lease': return getLeaseCollectGoods;
					}
				})();

				loadingFun(
				  reqMethod, 
				  page, 
				  collectionList, 
				  status
				).then(res => {
					if (res) {
						this.page = res.page;
						this.collectionList = res.dataList
						this.status = res.status
					}
				})
			},

			// 刷新
			reflesh() {
				this.collectionList = [];
				this.page = 1;
				this.status = loadingType.LOADING;
				this.getCollectGoodsFun();
			},

			// 取消收藏
			cancelCollect() {
				this.handleType({
					shop: () => {
						collectGoods({
							is_collect: CollectType.CANCEL_COLLECTION,
							goods_id: this.id
						}).then(res => {
							if (res.code == 1) {
								this.collectionList = [];
								this.page = 1;
								this.status = loadingType.LOADING;
								this.getCollectGoodsFun();
								this.deleteSure = false;
							}
						});
					},
					lease: () => {
						leaseCollectGoods({
							status: CollectType.CANCEL_COLLECTION,
							id: this.id
						}).then(res => {
							if (res.code == 1) {
								this.collectionList = [];
								this.page = 1;
								this.status = loadingType.LOADING;
								this.getCollectGoodsFun();
								this.deleteSure = false;
							}
						});
					}
				});
			},
			

			// 前往商品详情
			goToGoodsDetail(e) {
				const id = e.currentTarget.dataset.id;
				
				this.handleType({
					shop: () => {
						uni.navigateTo({
							url: '/pages/goods_details/goods_details?id=' + id
						});
					},
					lease: () => {
						uni.navigateTo({
							url: '/bundle/pages/lease_goods_details/lease_goods_details?id=' + id
						});
					}
				});
			}
		},
		
		watch: {
		    tabCurrent(value) {
				this.reflesh();
		    }
		},
		
		onLoad(options) {
			this.getCollectGoodsFun();
			getLeaseCollectGoods().then(res => {
				console.log(res);
			});
		},
		
		onReachBottom() {
			// this.getCollectGoodsFun();
			this.$nextTick(() => this.getCollectGoodsFun());
		}
	};
</script>
<style lang="scss">
	// page{
	// 	width: 750rpx;
	// }
	.item{
		padding: 0 30rpx;
		margin-left: 5%;
		width: 90%;
		margin-top: 30rpx;
		// margin:30rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		opacity: 1;
	}
	.name{
		font-size: 31rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.image{
		margin-right: 30rpx;
		width: 106rpx;
		height: 120rpx;
	}
	.price{
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: red;
	}
</style>
